 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>发现</title>

  <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
  />
  <!-- Google Fonts Roboto -->
  <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
  />
  <!-- MDB -->
  <link rel="stylesheet" href="../../../../../mdb5/css/mdb.min.css" />
  <!-- Include Bootstrap for styling -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <!-- Include the Bootstrap Table CSS
  for the table -->
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">

<style>

</style>
</head>
<body>



<!--搜索框-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="container">
  <br/>
  <div class="row justify-content-center">
    <div class="col-12 col-md-10 col-lg-8">
      <form class="card card-sm">
        <div class="card-body row no-gutters align-items-center">
          <div class="col-auto">
            <i class="fas fa-search h4 text-body"></i>
          </div>
          <!--end of col-->
          <div class="col">
            <input id="search-input" class="form-control form-control-lg form-control-borderless" type="search" placeholder="搜索用户名或群聊名">
          </div>
          <!--end of col-->
          <div class="col-auto">
            <button id="search-button-g" class="btn btn-primary" type="button">搜索群聊</button>
            <button id="search-button-u" class="btn btn-primary" type="button">搜索用户</button>
          </div>
          <!--end of col-->
        </div>
      </form>
    </div>
    <!--end of col-->
  </div>
</div>
<br/>


<table id="table" class="table-striped border-success">
</table>



<!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<script src="../../../../../webjars/jquery/3.3.1-1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Include the JavaScript file
for Bootstrap table -->
<script src=
                "https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js">
</script>

<!--<script src="../../../../../webjars/bootstrap/4.0.0/js/bootstrap.min.js"></script>-->
<script src="../../../../../layim/dist/layim.js">
</script>
<script src="../../../../../layui/layui.js"></script>
<script type="text/javascript" src="../../../../../mdb5/js/mdb.min.js"></script>
<script type="text/javascript">
  var username;
  var id;
  var status;
  var sign;
  var avatar;
  var websocket;
  username=sessionStorage.getItem("username");
  id=sessionStorage.getItem("id");
  status=sessionStorage.getItem("status");
  sign=sessionStorage.getItem("sign");
  avatar=sessionStorage.getItem("avatar");
  if ('WebSocket' in window) {
    websocket = new WebSocket("ws://localhost:8080/webSocket/"+username);
  }
  console.log(websocket);

  websocket.onmessage=function (event){
    // var data=JSON.parse(event.data);
    console.log(event.data);
  }


  
  var findUser = [{
    field: 'avatar',
    title: '头像',
    align : 'center',
    formatter:function(value, item, index) {
      return '<img src="'+value+'" style="width: 48px; height: 37px;"'+' />';
    }
  }, {
      field: 'username',
      title: '用户名',
    align : 'center'
    } ,
    {
      field: 'sign',
      title: '签名',
      align : 'center'
    } , {
      checkbox: true
    } ];
  var findGroup = [{
    field: 'avatar',
    title: '头像',
    align : 'center',
    formatter:function(value, item, index) {
      return '<img src="'+value+'" style="width: 48px; height: 37px;"'+' />';
    }
  }, {
      field: 'groupname',
      title: '群名称',
    align : 'center'
    } , {
      field: 'id',
      title: '群id',
    align : 'center'
    } , {
      checkbox: true
    } ];
  const searchButtonU = document.getElementById('search-button-u');
  const searchButtonG = document.getElementById('search-button-g');
  const searchInput = document.getElementById('search-input');


  $('#table').bootstrapTable({
    columns: findUser, //列对象
    data: {},//要显示的数据对象
  });
  //userfind
  searchButtonU.addEventListener('click', () => {
    $('.toast').toast('show');
    const inputValue = searchInput.value;
    $.ajax({
      method:'get',
      url:'/search/user/'+inputValue,
      contentType:"application/json",
      type: "GET"
    }).then(res=>{
      $('#table').bootstrapTable('refreshOptions',{
        singleSelect : true,
        columns: findUser, //列对象
        data: res.data.list, //要显示的数据对象
        onCheck:function(row, $element){
          console.log(row);

          // layui.use('layim',function (layim) {
          //   layim.add({
          //     type: 'friend' //friend：申请加好友、group：申请加群
          //     ,username: row.username //好友昵称，若申请加群，参数为：groupname
          //     ,avatar: row.avatar //头像
          //     ,group:layui.layim.cache().group
          //     ,submit: function(group, remark, index){ //一般在此执行Ajax和WS，以通知对方

          var d = new Date();
          d = new Date(d.getTime() - 3000000);
          var date_format_str = d.getFullYear().toString()+"-"+((d.getMonth()+1).toString().length==2?(d.getMonth()+1).toString():"0"+(d.getMonth()+1).toString())+"-"+(d.getDate().toString().length==2?d.getDate().toString():"0"+d.getDate().toString())+" "+(d.getHours().toString().length==2?d.getHours().toString():"0"+d.getHours().toString())+":"+((parseInt(d.getMinutes()/5)*5).toString().length==2?(parseInt(d.getMinutes()/5)*5).toString():"0"+(parseInt(d.getMinutes()/5)*5).toString())+":00";
          console.log(date_format_str);

          var data={
                fromUid:id,
                toUid:row.id,
                type:2,//0用户，1群聊，2用户未确认群组
                groupId:null,
                time:null,
                remark:null
              }

              websocket.send(JSON.stringify(data));
          //
          //       console.log(group); //获取选择的好友分组ID，若为添加群，则不返回值
          //       console.log(remark); //获取附加信息
          //       layer.close(index,function (){
          //         // $('#table').bootstrapTable('uncheckBy', {field: 'username', values:row.username});
          //       }); //关闭改面板
          //     }
          //   })
          // })
            $('#table').bootstrapTable('uncheckBy', {field: 'username', values:row.username});


        }
      });
    })
  });
  //groupfind
  searchButtonG.addEventListener('click', () => {
    const inputValue = searchInput.value;
    $.ajax({
      method:'get',
      url:'/search/group/'+inputValue,
      contentType:"application/json",
      type: "GET"
    }).then(res=>{
      $('#table').bootstrapTable('refreshOptions',{
        singleSelect : true,
        columns: findGroup, //列对象
        data: res.data.list, //要显示的数据对象
        onCheck:function(row, $element){
          alert(JSON.stringify(row));
        }
      });
    })
  });

</script>
</body>
</html>
